var that;
class Tab {
    constructor(id) { // 构造函数内的this都是指向实例化对象
        that = this;
        this.tab = document.querySelector(id); // 选出#tab标签
        this.ul = document.querySelector("ul");
        this.add = document.querySelector(".tabadd");
        this.tb = document.querySelector(".tabscon");
        this.init();
    }
    // 下面普通方法内的this都是指向方法的调用者..
    upData() {
        this.lis = this.tab.querySelectorAll("li"); // 选出#tab标签里的所有li标签
        this.secs = this.tab.querySelectorAll("section"); // 选出#tab标签里的所有section标签
        this.remove = document.querySelectorAll(".icon-guanbi");
        this.spans = document.querySelectorAll("li span:first-child");
    }
    init() { // 初始化函数
        this.upData();
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i; // 给li添加index属性赋值为i
            this.lis[i].onclick = this.toggleTab; // 点击事件调用函数,不能加(),否则会直接执行
            this.remove[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab; // 双击事件
            this.secs[i].ondblclick = this.editTab;
        }
    }
    toggleTab() { // 切换效果的函数
        that.clearName(); // 实例化对象调用清除类名效果的函数,排他
        this.className = "liactive"; // 当前点击的li的类名为liactive
        that.secs[this.index].className = "conactive"; // 实例化对象中与li索引号相同的section的类名为conactive,用this的话表示li里面的sec,直接报错
    }
    clearName() { // 清除类名的函数
        for (var i = 0; i < this.lis.length; i++) { // for循环排他
            this.lis[i].className = ""; // 所有的li类名为空
            this.secs[i].className = ""; // 所有section类名为空
        }
    }
    addTab() {
        that.clearName(); // 使新增的标签保持点击状态
        var li = `<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>`;
        var sec = `<section class="conactive">${Math.random()}</section>`;
        that.ul.insertAdjacentHTML("beforeend", li);
        that.tb.insertAdjacentHTML("beforeend", sec);
        that.init(); // 重新调用切换函数
    }
    removeTab(e) {
        e.stopPropagation(); // 阻止冒泡
        var index = this.parentNode.index; // 得到li的索引
        that.lis[index].remove();
        that.secs[index].remove(); // 删除对应标签
        that.init();
        if (document.querySelector(".liactive")) return; // 判断如果找的到".liactive"类名就返回,找不到就往下执行
        index--;
        index < 0 ? index = 0 : index;
        that.lis[index] && that.lis[index].click(); // 短路运算
    }
    editTab() {
        this.innerHTML = `<input tpye = "text" value = ${this.innerHTML}>`;
        var input = this.children[0];
        input.select();
        input.ondblclick = function (e) {
            e.stopPropagation();
        }
        input.onblur = function () {
            this.parentNode.innerHTML = this.value;
        };
        input.onkeyup = function (e) {
            if (e.keyCode == 13) {
                this.blur();
            }
        }
    }
};
new Tab("#tab"); // 实例化对象
// 
// var that;
// class Tab {
//     constructor(id) {
//         that = this;
//         this.tab = document.querySelector(id);
//         this.ul = document.querySelector("ul");
//         this.add = document.querySelector(".tabadd");
//         this.tb = document.querySelector(".tabscon");
//         this.init();
//     }
//     upData() {
//         this.lis = document.querySelectorAll("li");
//         this.secs = document.querySelectorAll("section");
//         this.remove = document.querySelectorAll(".icon-guanbi");
//     }
//     init() {
//         this.upData();
//         this.add.onclick = this.addTab;
//         for (var i = 0; i < this.lis.length; i++) {
//             this.lis[i].index = i;
//             this.lis[i].onclick = this.toggleTab;
//             this.remove[i].onclick = this.removeTab;
//             this.lis[i].ondblclick = this.editTab;
//         }
//     }
//     toggleTab() {
//         that.clearName();
//         this.className = "liactive";
//         that.secs[this.index].className = "conactive";
//     }
//     clearName() {
//         for (var i = 0; i < this.lis.length; i++) {
//             this.lis[i].className = "";
//             this.secs[i].className = "";
//         }
//     }
//     addTab() {
//         that.clearName();
//         var li = `<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>`;
//         var sec = `<section class="conactive">${Math.random()}</section>`;
//         that.ul.insertAdjacentHTML("beforeend", li);
//         that.tb.insertAdjacentHTML("beforeend", sec);
//         that.init();
//     }
//     removeTab(e) {
//         e.stopPropagation();
//         var index = this.parentNode.index;
//         that.lis[index].remove();
//         that.secs[index].remove();
//         that.init();
//         if (document.querySelector(".liactive")) return;
//         index--;
//         index < 0 ? index = 0 : index;
//         that.lis[index] && that.lis[index].click();
//     }
// };
// new Tab("#tab");